<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健身-首页</title>
</head>

<body>

    <main>

        <!-- 轮播图盒子 -->
        <div class="banner">
            <!-- 轮播图 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <img class="swiper-slide" src="./img/banner1.jpg" alt="">
                    <img class="swiper-slide" src="./img/banner2.jpg" alt="">
                    <img class="swiper-slide" src="./img/banner3.jpg" alt="">
                </div>
                <div class="swiper-pagination"></div>
                <!--分页器。如果放置在swiper外面，需要自定义样式。-->
            </div>
        </div>



        <!-- 今日排名 累计打卡 -->
        <div class="main1">
            <div class="left1">
                <span>今日排名</span>
                <div class="icon1"></div>
                <div class="num">0</div>
            </div>
            <div class="right1">
                <div class="clock">累计打卡 <span>0</span> 天</div>
                <div class="icon5"></div>
                <div class="newClock">今日打卡</div>
            </div>
        </div>

        <!-- 运动数据 徽章 -->
        <div class="main2">
            <div class="left2">
                <span>运动数据</span>
            </div>
            <div class="right2">
                <span class="hz">累计运动徽章</span>
                <div class="icon3"></div>
                <div class="num2">0</div>
                <span class="mei">枚</span>
            </div>
        </div>

        <!-- 课程训练 -->
        <div class="main3">
            <div class="practice">
                <span>课程训练</span>
            </div>
        </div>

        <!-- 户外跑步 -->
        <div class="main4">
            <div class="sport">
                <span>户外跑步</span>
            </div>
        </div>

    </main>

    <!-- 页脚 -->
    <!-- utils生成页脚footer -->

</body>

</html>